<template>
  <el-form-item :label="label" :prop="prop">
    <wda-tree-select
      v-model="newv"
      :placeholder="placeholder"
      :type="type"
      class-name="wde-tree-select"
      :options="options"
      :isDisabled="isDisabled"
      :valueKey="valueKey"
      :checkStrictly="checkStrictly"
      :args="args"
      @change="handleChange"
    />
  </el-form-item>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: [Boolean, String, Number],
  type: Number,
  initial: Boolean,
  label: {
    type: String,
    default: ""
  },
  prop: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请选择"
  },
  options: {
    type: Array,
    default: () => null
  },
  isDisabled: {
    type: Boolean,
    default: false
  },
  checkStrictly: {
    type: Boolean,
    default: false
  },
  args: {
    type: Object,
    default: () => ({})
  },
  valueKey: {
    type: String,
    default: "value"
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const newv = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const handleChange = (event) => {
  emit('change', event);
};
</script>

<style scoped>
.wde-tree-select {
  width: 100%;
}
</style> 